<template>
  <div class="home text-center">
    <header
      v-pin:[direction]="pinPadding"
      style="width: 100%; text-align: center"
      class="max640"
    >
      <p>
        Stick me
        <span class="text-color">{{ pinPadding }}</span>
        px from the {{ direction }} of the page
      </p>
    </header>

    <p class="mg20 text-color">{{ time }}</p>

    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />


    <p class="mg10 text-color">以下是自定义全局组件</p>
    <div class="mg-b20">
      <YuiButton @click="handleClick()">自定义全局按钮</YuiButton>
    </div>
    <div class="mg-b20">
      <YuiSelect @selectdata="selectdata"></YuiSelect>
    </div>
    <div class="mg-b20">
      <YuiList :users="users" @test="test"></YuiList>
    </div>
    <div class="mg-b20 flex flex-center">
      自定义指令：
      <input
        type="range"
        min="0"
        max="1000"
        v-model="pinPadding"
        style="z-index: 9"
      />
    </div>
    <Button type="success" @click="showToast">更改字体颜色</Button>
  </div>
</template>

<script lang="ts">
import dayjs from "dayjs";
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src  局部引入
import { Button, Dialog, Toast } from "vant";
import { openLoading, closeLoading, VantToast } from "@/components/Loading";

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,//局部引入
    Button,
  },
  data() {
    return {
      direction: "top",
      pinPadding: 0,
      time: "",
      timer: 0,
      color: "red",
      city: ["", "", ""],
      page: 10,
      users: ["3123", "21321", "54356546"],
      name:'eqwe'
    };
  },
  created() {
    this.initTime();
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
  methods: {
    selectdata: function (childValue: any) {  //子组件传父组件
      // childValue就是子组件传过来的值
      console.log('过来了',childValue)
      this.users.push(childValue)
      // this.name = childValue;
    },
    test: function (childValue: any) {  //子组件传父组件
      // childValue就是子组件传过来的值
      console.log('过来了',childValue)
      // this.name = childValue;
    },
    showToast() {
      Toast("字体颜色已改蓝色");
      this.color = "blue";
      Dialog({
        title: "标题",
        message: "这是一个全局按钮组件",
      });
    },
    handleClick() {
      const that=this;
      openLoading("正在保存");
      
      setTimeout(function () {
        closeLoading();
        VantToast("保存成功");
        that.users.push('qwe')
      }, 3000);
    },

    // 时钟  time timer定时获取时间。
    initTime() {
      this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
      this.timer = setInterval(() => {
        this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
  },
});
</script>

<style>
.text-color {
  color: v-bind(color);
}
</style>
